<template>
    <div class="container">
        <div class="tag-container">
            <span class="text-tag">标签:</span>
            <ul>
                <li v-for="(item,index) of tags" :key="index">{{item}}</li>
            </ul>
        </div>
        <div class="jianjie">
            <span v-for="(item,index) of description2" :key="index">{{item}}</span>
            <span v-show="showArrow && shows" @click="show" class="iconfont arrow-U">&#xe602;</span>
            <span v-show="!showArrow && shows" @click="show" class="iconfont arrow-U">&#xe601;</span>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            showArrow: true,
            shows: true
        }
    },
    methods:{
        show() {
            this.$emit('show')
            this.showArrow = !this.showArrow
        },
        showss() {
            this.$emit('shows',this.shows)
        }
    },
    props: {
        tags: {
            type: Array,
            default() {
                return []
            }
        },
        description2: {
            type: Array,
            default() {
                return []
            }
        },
        description3: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        background: #fff;
        padding: 40px;
        display: flex;
        flex-direction: column;
        .tag-container {
            display: flex;
            align-items: center;
            .text-tag {
                font-size: 37px;
                color: #666;
                margin-right: 30px;
            }
            ul {
                display: flex;
                li {
                    padding: 10px  20px;
                    border-radius: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 32px;
                    border: 1px solid #ccc;
                    margin-right: 30px;
                }
            }
        }
        .jianjie {
            position: relative;
            display: flex;
            flex-direction: column;
            margin-top: 40px;
            span {
                font-size: 37px;
                color: #666;
                line-height: 1.3;
                width: 96%;
            }
            .arrow-U {
                font-size: 34px;
                display: flex;
                width: 930px;
                justify-content: flex-end;
            }
        }
    }
</style>